<template>
  <view class="news">
    <pit-search placeholder="请输入新闻标题"></pit-search>
    <view class="news-content">
      <view v-for="(item,index) in newslist" :key="index" class="news-content-item">
        <img src="/static/home/workbench/quality_testing_empty.png" alt="空图片" class="item-img" />
        <view class="item-element">
          <view class="element-name">
            <view class="name-text" v-if="item.approvalStatus
  ='end'">流程结束</view>
            <text class="name-title">{{item.categoryName}}</text>
          </view>
          <view class="element-title">{{item.title}}</view>
          <view class="element-time">{{item.createdDate}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default{
    name:'pit-news',
    props: {
      newslist: {
        type: Array,
        default: () => []
      }
    },
    data(){
      return{
      }
    },
    methods:{
    }
  }
</script>

<style lang="scss" scoped>
  .news{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    .news-content{
      max-height: calc(100vh - 140px);
      padding: 10px 15px;
      overflow-y: auto;
      .news-content-item{
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        padding: 20px 10px;
        border-radius: 6px;
        background-color: white;
        .item-img{
          width: 65px;
          height: 65px;
          margin-right: 15px;
        }
        .item-element{
          flex: 1;
          display: flex;
          flex-direction: column;
          text-align: left;
          .element-name{
            display: flex;
            .name-text{
              margin-right: 8px;
              width: 70px;
              height: 20px;
              text-align: center;
              font-size: 13px;
              color: rgb(109,197,66);
              background-color: rgb(240,249,235);
            }
            .name-title{
              font-size: 18px;
              color: rgb(52,67,100);
            }
          }
          .element-title,
          .element-time{
            color: rgb(122,137,168);
          }
        }
      }
    }
  }
</style>
